<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>pay</title>

    <link  href="../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <script src="../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}"  type="text/javascript"></script>
    <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>

    <style type="text/css">
        body{
            background-color: #f1f2f6;
        }

        .foot{
            position:relative;
            bottom:0;
            height: 100px;
            margin-top: 50px;
            padding-top: 30px;
            width: 100%;
            text-align:center;
            background-color: white;
            font-size: 12px;
        }

        .glyphicon-user{
            color:coral;
            font-size:20px;
        }

        .fcolor{
            color: white;
            font-size:20px;
        }
        input{
            border-bottom: 1px solid #dbdbdb;
            border-top:0px;
            border-left:0px;
            border-right:0px;
        }
    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: #ffffff; height: 80px;margin-bottom: 10px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px; background: url(../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <div class="nav navbar-nav" style="width: 70%;padding-top: 30px;padding-left: 110px">

                <span style="color: #747d8c;float: left">乘机信息&nbsp;</span>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 32%;margin-top: 10px;"></div>
                <span style="color: #ffa801;float: left">&nbsp;支付&nbsp;</span>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 32%;margin-top: 10px;"></div>
                <span style="color: #747d8c;float: left">&nbsp;完成</span>

            </div>
            <div class="nav navbar-nav navbar-right" style="padding-top: 25px;margin-right: 0px">
                <!--<a href="/customerCenter">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >你好，李白</span>
                </a>-->
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row" style="background-color:#ffffff;
        -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090">
        <div class="col-md-5" style="background-color:#ffffff;padding-top: 20px;color: #303952">
            <p>
                <span>订单金额</span>
                <span style="font-size: 20px;color:#e84118">￥780.00</span>
            </p>
            <p>
                <!--<span>支付时间剩余</span>
                <span style="color: #e84118">13:06</span>
                <span>，超时订单可能会被取消</span>-->
                <span>请支付</span>
            </p>
        </div>
        <div class="col-md-7" style="background-color: #f1f2f6;padding-top: 20px;color: #747d8c;font-size: 12px;border-left: 1px dotted #596275">
            <p style="color: #0f0f0f; font-size: 15px">
                <span>单程机票</span>
                &nbsp;&nbsp;
                <span>北京</span>
                <span>-</span>
                <span>上海</span>
            </p>
            <p>
                <span>
                    首都国际机场T2&nbsp;飞往&nbsp;&nbsp;浦东国际机场T1&nbsp;&nbsp;&nbsp;&nbsp;出发时间:2019-12-30&nbsp;07:30
                </span>
            </p>
            <p>
                <span>
                    乘机人:&nbsp;第九组&nbsp;&nbsp;乘机证件：&nbsp;身份证&nbsp;123456789
                </span>
            </p>
        </div>
    </div>
    <div class="row" style="background-color:#ffffff;margin-top: 20px;padding-top: 10px;
        -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090">
        <div style="width: 60%">
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a data-toggle="tab" href="#home">储蓄卡</a></li>
                <li><a data-toggle="tab" href="#menu1">信用卡</a></li>
                <li><a data-toggle="tab" href="#menu2">微信支付</a></li>
                <li><a data-toggle="tab" href="#menu3">支付宝</a></li>
                <li><a data-toggle="tab" href="#menu4">更多</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active" style="height: 330px; text-align: center" >
                <form>
                    <br><br>
                    <h4>你暂时无法使用卡,请在下方添加卡片</h4>
                    <br><br>
                    <input type="text" style="width:25%; height: 30px;outline:none;" value="" placeholder="请输入银行卡号">
                    <br><br><br><br><br>
                    <button class="btn continuePay" type="button" style="width: 25%;background-color:#00a8ff; color:#ffffff ">下一步</button>
                </form>
            </div>
            <div id="menu1" class="tab-pane fade" style="height: 330px; text-align: center" >
                <h3>菜单 2</h3>
                <p>这是菜单 2 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
            </div>
            <div id="menu2" class="tab-pane fade" style="height: 330px; text-align: center" >
                <h3>菜单 3</h3>
                <p>这是菜单 3 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
            </div>
            <div id="menu3" class="tab-pane fade" style="height: 330px; text-align: center" >
                <h3>菜单 4</h3>
                <p>这是菜单 4 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
            </div>
            <div id="menu4" class="tab-pane fade" style="height: 330px; text-align: center" >
                <h3>菜单 5</h3>
                <p>这是菜单 5 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
            </div>
        </div>
    </div>
    <div class="row">
        <button id="backstep"  class="btn btn-link" style="outline:none;">&lt;返回修改订单</button>
    </div>
</div>



<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>

</body>

<script type="text/javascript">


    $('.continuePay').click(function () {
        location.href="/continuePay";
    });

    $('#backstep').click(function () {
        window.history.go(-1);
    });


</script>

</html>